<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 头部 -->
      <template>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
          <el-menu-item index="1" @click="showDataform(1)">计薪设置</el-menu-item>
          <el-menu-item index="2" @click="showDataform(2)">津贴设置</el-menu-item>
        </el-menu>
      </template>
      <!-- 内容 -->

      <el-card style="margin-top: 15px;">
        <!-- 表单1 -->
        <el-form v-if="showData===1" label-width="120px" :model="sendForm">
          <el-form-item label="对应社保自然月">
            <el-select v-model="sendForm.socialSecurityType" placeholder="请选择" style="width:300px">
              <el-option label="当月" :value="1" />
              <el-option label="次月" :value="2" />
            </el-select>
            <el-tooltip
              content="如果201606月工资中扣除2016年6月自然月的社保公积金，请选择当月；如果扣除2016年7月自然月的社保公积金，请选择次月。"
              placement="top"
            >
              <i
                class="el-icon-warning-outline ibiaoqian"
              />
            </el-tooltip>
          </el-form-item>
          <el-form-item label="社保数据来源">
            <el-input style="width: 300px" disabled placeholder="社保模块" />
            <el-tooltip
              content="计算工资时的五险一金金额将取自社保报表"
              placement="top"
            >
              <i
                class="el-icon-warning-outline ibiaoqian"
              />
            </el-tooltip></el-form-item>
          <el-form-item label="考勤数据来源">
            <el-input style="width: 300px" disabled placeholder="考勤模块" />
            <el-tooltip
              content="计算工资时的考勤数据将取自考勤统计表"
              placement="top"
            >
              <i
                class="el-icon-warning-outline ibiaoqian"
              />
            </el-tooltip></el-form-item>
          <!-- 提交 -->
          <el-form-item>
            <template>
              <el-button type="primary" @click="submitform">提交</el-button>
              <el-button @click="replacement">重置</el-button>
            </template>
          </el-form-item>
        </el-form>
        <!-- 表单2 -->
        <el-form v-else label-width="120px">
          <el-form-item label="通用方案">
            <el-input v-model="sendForm.subsidyName" style="width: 500px" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="sendForm.subsidyRemark" style="width: 500px" />
          </el-form-item>
          <el-form-item label="津贴名称">
            <!-- 0 -->

            <!-- 选择器 -->
            <p>
              <el-input placeholder="交通补贴" style="width: 200px;" :disabled="true" class="niubilll" />
              <el-select v-model="sendForm.transportationSubsidyScheme" placeholder="请选择">
                <el-option v-for="item in subsidySchemes" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-tooltip
                :content="text"
                placement="top"
              >
                <i
                  class="el-icon-warning-outline niubilll"
                />
              </el-tooltip>
              <el-input v-model="sendForm.transportationSubsidyAmount" placeholder="请输入内容" style="width: 200px;" />
            </p>

            <!-- 1 -->

            <!-- 选择器 -->
            <p>
              <el-input placeholder="通讯补贴" style="width: 200px;" :disabled="true" class="niubilll" />
              <el-select v-model="sendForm.communicationSubsidyScheme" placeholder="请选择">
                <el-option v-for="item in subsidySchemes" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-tooltip
                :content="text"
                placement="top"
              >
                <i
                  class="el-icon-warning-outline niubilll"
                />
              </el-tooltip>
              <el-input v-model="sendForm.communicationSubsidyAmount" placeholder="请输入内容" style="width: 200px;" />
            </p>

            <!-- 2 -->

            <!-- 选择器 -->
            <p>
              <el-input placeholder="午餐补贴" style="width: 200px;" :disabled="true" class="niubilll" />
              <el-select v-model="sendForm.lunchAllowanceScheme" placeholder="请选择">
                <el-option v-for="item in subsidySchemes" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-tooltip
                :content="text"
                placement="top"
              >
                <i
                  class="el-icon-warning-outline niubilll"
                />
              </el-tooltip>
              <el-input v-model="sendForm.lunchAllowanceAmount" placeholder="请输入内容" style="width: 200px;" />
            </p>

            <!-- 3 -->

            <!-- 选择器 -->
            <p>
              <el-input placeholder="住房补助" style="width: 200px;" :disabled="true" class="niubilll" />
              <el-select v-model="sendForm.housingSubsidyScheme" placeholder="请选择">
                <el-option v-for="item in subsidySchemes" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-tooltip
                :content="text"
                placement="top"
              >
                <i
                  class="el-icon-warning-outline niubilll"
                />
              </el-tooltip>
              <el-input v-model="sendForm.housingSubsidyAmount" placeholder="请输入内容" style="width: 200px;" />
            </p>

          </el-form-item>
          <el-form-item label="适用计税方式">
            <template>
              <el-radio v-model="sendForm.taxCalculationType" label="1">税前</el-radio>
              <el-radio v-model="sendForm.taxCalculationType" label="2">税后</el-radio>
            </template>
          </el-form-item>
          <el-form-item>
            <template>
              <el-button type="primary" @click="submitform">提交</el-button>
              <el-button @click="replacement">重置</el-button>
            </template>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getsalaryssettings, salaryssettingspost } from '@/api/salarys'
export default {
  data() {
    return {
      text: '每出勤日：金额*实际出勤天数； 每计薪日：金额*计薪天数； 每月固定：固定金额； 每月（按出勤日）：金额*实际出勤天数/应出勤工作日； 每月（按计薪日）：金额*计薪天数/计薪标准（如21.75）；',
      activeIndex: '1',
      showData: 1,
      regular: ['每出勤日', '每月固定'],
      selectvalue: '次月',
      subsidySchemes: [
        { 'id': 1, 'name': '每出勤日' },
        { 'id': 3, 'name': '每月固定' }
      ],
      radio: '',
      radiotuo: '',
      sendForm: {
        socialSecurityType: 1,
        transportationSubsidyScheme: 1,
        communicationSubsidyScheme: 1,
        lunchAllowanceScheme: 1,
        housingSubsidyScheme: 1,
        taxCalculationType: '1',
        transportationSubsidyAmount: 2.1,
        communicationSubsidyAmount: 1.2,
        lunchAllowanceAmount: 1.3,
        housingSubsidyAmount: 1.5
      }
    }
  },
  created() {
    this.getsalaryssettings()
  },
  methods: {
    // 提交
    async submitform() {
      await salaryssettingspost(this.sendForm)
      this.$message.success('提交成功')
      this.getsalaryssettings()
    },
    // 重置
    replacement() {
      this.getsalaryssettings()
    },
    // 切换
    showDataform(id) {
      this.showData = id
    },
    // 获取企业计薪及津贴设置
    async getsalaryssettings() {
      this.sendForm = await getsalaryssettings()
      // console.log(this.sendForm)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-menu-demo{
    box-shadow: -3px 3px 5px  #e4e4e4;
}
.ibiaoqian{
  margin-left: 10px;
}
.niubilll{
  margin: 0 10px;
}
</style>
